<template>
  <view class="home-module__teacher" :class="[datas.arrange == 3 ? 'teacher-scroll' : '']">
    <view class="teacher-header">
      <view class="title u-line-1">{{ datas.title }}</view>
      <view class="more" @click="goMore">更多<u-icon name="arrow-right"></u-icon></view>
    </view>

    <!-- 宫格/列表 -->
    <view
      v-if="datas.arrange == 1 || datas.arrange == 2"
      :class="[datas.arrange == 1 ? 'list' : 'gongge']"
      class="teacher-list"
    >
      <view v-for="(item, index) in datas.list" :key="index" class="item">
        <view class="picture" @click="goTeacher(item.user_id)">
          <edu-image :src="item.avatar" width="100%" height="100%"></edu-image>
        </view>
        <view class="content">
          <view class="signal">
            <view class="name" @click="goTeacher(item.user_id)">{{ item.title }}</view>
            <view class="grade" v-if="item.level_text">/{{ item.level_text }}</view>
          </view>
          <view class="firmware" v-if="datas.arrange == 1">{{ item.signature }}</view>
        </view>
      </view>
    </view>

    <!-- 滚动 -->
    <view v-else-if="datas.arrange == 3" class="teacher-list scroll">
      <swiper
        :display-multiple-items="displayMultipleItems"
        next-margin="15px"
        class="teacher-swiper"
      >
        <swiper-item v-for="(item, index) in datas.list" :key="index" class="teacher-swiper-teim">
          <view class="item" :class="[{ 'item-w': displayMultipleItems == 1 }]">
            <view class="picture" @click="goTeacher(item.user_id)">
              <edu-image :src="item.avatar" width="100%" height="100%"></edu-image>
            </view>
            <view class="content">
              <view class="signal">
                <view class="name" @click="goTeacher(item.user_id)">{{ item.title }}</view>
                <view class="grade" v-if="item.level_text">/{{ item.level_text }}</view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Teacher',
  props: {
    datas: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {}
  },
  computed: {
    displayMultipleItems() {
      if (this.datas.list.length < 2) return 1
      return 2
    },
  },
  methods: {
    // 跳转更多
    goMore() {
      this.$u.route('pageFound/teacher/list')
    },
    // 跳转讲师
    goTeacher(id) {
      if (id == 0) return
      this.$edu.route('pageFound/user/index', {
        id: id,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.home-module__teacher {
  margin-bottom: 56rpx;
  &.teacher-scroll {
    margin-bottom: 8rpx;
  }
  .teacher-header {
    padding: 0 30rpx;
    display: flex;
    align-items: center;
    .title {
      font-size: 34rpx;
      font-weight: bold;
      color: $edu-main-color;
      line-height: 48rpx;
      flex: 1;
      min-width: 0;
      margin-right: 30rpx;
    }
    .more {
      font-size: 24rpx;
      font-weight: 400;
      color: #888888;
      line-height: 34rpx;
    }
  }
  .teacher-list {
    .item {
      .picture {
        overflow: hidden;
      }
      .content {
        .signal {
          display: flex;
          .name,
          .grade {
            font-weight: 500;
            line-height: 40rpx;
          }
          .name {
            font-size: 28rpx;
            color: #333333;
            overflow: hidden;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; // 弹性伸缩盒
            -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
            -webkit-line-clamp: 1;
          }
          .grade {
            font-size: 22rpx;
            color: #888888;
            white-space: nowrap;
          }
        }
        .firmware {
          font-size: 24rpx;
          font-weight: 400;
          color: $edu-tips-color;
          line-height: 34rpx;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box; // 弹性伸缩盒
          -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
          -webkit-line-clamp: 3;
        }
      }
    }
    &.list {
      margin-top: 32rpx;
      display: grid;
      padding: 0 30rpx;
      grid-row-gap: 20rpx;
      .item {
        grid-column: span 1 / span 1;
        padding: 22rpx;
        display: flex;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 20rpx;
        .picture {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
        .content {
          margin-left: 24rpx;
          padding-top: 10rpx;
          flex: 1;
          min-width: 0;
          .firmware {
            margin-top: 20rpx;
          }
        }
      }
    }
    &.gongge {
      margin-top: 32rpx;
      display: grid;
      padding: 0 30rpx;
      grid-gap: 28rpx 22rpx;
      grid-template-columns: repeat(2, minmax(0px, 1fr));
      .item {
        grid-column: span 1 / span 1;
        padding: 12rpx 12rpx 0;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 20rpx;
        .picture {
          height: 310rpx;
          border-radius: 16rpx;
        }
        .content {
          padding: 16rpx 0;
          .signal {
            justify-content: center;
          }
        }
      }
    }
    &.scroll {
      padding-left: 20rpx;
      .teacher-swiper {
        height: 470rpx;
      }
      .teacher-swiper-teim {
        padding-top: 32rpx;
        box-sizing: border-box;
      }
      .item {
        height: 378rpx;
        padding: 12rpx 12rpx 0;
        background: #ffffff;
        box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(48, 49, 51, 0.06);
        border-radius: 20rpx;
        margin: 0 10rpx;
        &.item-w {
          width: 330rpx;
        }
        .picture {
          height: 310rpx;
          border-radius: 16rpx;
        }
        .content {
          padding: 16rpx 0;
          .signal {
            justify-content: center;
          }
        }
      }
    }
  }
}
</style>
